<?php
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<script src="http://localhost/OpenLayers/OpenLayers.js"></script>
<script src="http://localhost/OpenLayers/lib/OpenLayers/Lang/es.js"></script>
<script src="http://localhost/OpenLayers/lib/OpenLayers/Control/ScaleBar.js"></script>
<link rel="stylesheet" href="http://localhost/OpenLayers/theme/default/style.css" type="text/css"/>
<link rel="stylesheet" href="http://localhost/OpenLayers/theme/default/scalebar-fat.css" type="text/css" />
<link rel="stylesheet" href="http://localhost/OpenLayers/theme/default/controls.css" type="text/css" />
<style type="text/css">
    #div_layerswitcher {
        width: 100%;
        height: 120px;
        font-family: sans-serif;
        font-weight: bold;
        margin: 10px;
        font-size: large;
        color: black;
        background-color: transparent;
    }
    #div_overviewmap {


    }
    #map {
        width: 100%;
        height: 515px;
        border: solid 2px #808080;
    }

</style>
<html>
    <head>
        <script type="text/javascript">

            //maxExtent: new OpenLayers.Bounds(-75.5000, -56.2000, -58.5000, -19.4000),
            // Definimos las variables globales
            var mapa, zb, panel, capaPunto, capaLinea, capaPoligono, nav, escala
            var cambiocapas, layer1, layer2, layer3, layer4, layer5, layer6, layer7
            var layer_estados, layer_tipos_obras
            var mapaopciones = {
                controls: [],
                maxExtent: new OpenLayers.Bounds(-80.0000, -60.2000, -45.0000, -19.4000),
                maxResolution: 'auto',
                units: "m",
                projection: "EPSG:22185"

            }

            // Definimos una función que arranque al cargar la página
            window.onload = function() {
                init()
                capas()

            }

            function init(){

                OpenLayers.Lang.setCode("es");

                mapa = new OpenLayers.Map('map', mapaopciones);


                mapa.addControl(new OpenLayers.Control.Navigation());
                mapa.addControl(new OpenLayers.Control.OverviewMap({maximized:true}));
                zb = new OpenLayers.Control.ZoomBox();
                panel = new OpenLayers.Control.Panel({defaultControl: zb});

                capaPunto = new OpenLayers.Layer.Vector("Capa Puntos", {displayInLayerSwitcher:false});
                capaLinea = new OpenLayers.Layer.Vector("Capa Linea", {displayInLayerSwitcher:false});
                capaPoligono = new OpenLayers.Layer.Vector("Capa Poligono", {displayInLayerSwitcher:false});

                //    capaNuevaObra = new OpenLayers.Layer.Vector("Nueva Obra",{displayInLayerSwitcher:false});

                mapa.addLayers([capaPunto,capaLinea,capaPoligono]);

                panel.addControls([
                    //manito
                    new OpenLayers.Control.MouseDefaults(),
                    zb,
                    new OpenLayers.Control.DrawFeature(capaPunto, OpenLayers.Handler.Point, {displayClass:"punto"}),
                    new OpenLayers.Control.DrawFeature(capaLinea, OpenLayers.Handler.Path, {displayClass:"linea"}),
                    new OpenLayers.Control.DrawFeature(capaPoligono, OpenLayers.Handler.Polygon, {displayClass:"poligono"}),
                    new OpenLayers.Control.ZoomToMaxExtent()
                ]);

                nav = new OpenLayers.Control.NavigationHistory();
                mapa.addControl(nav);
                panel.addControls([nav.next, nav.previous]);
                mapa.addControl(panel);
                mapa.addControl(new OpenLayers.Control.KeyboardDefaults());
                mapa.addControl(new OpenLayers.Control.MousePosition());
                mapa.addControl(new OpenLayers.Control.Scale());

                mapa.addControl(new OpenLayers.Control.Navigation());
                mapa.addControl(new OpenLayers.Control.PanZoomBar());
                escala = new OpenLayers.Control.ScaleBar({
                    // div: document.getElementById("scalebar"),
                    minWidth: 75,
                    maxWidth: 175
                });

                mapa.addControl(escala);
                //mapa.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

            }

            function capas() {

                cambiocapas = new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('div_layerswitcher'), roundedCorner: true, roundedCornerColor:'darkblue'});

                mapa.addControl(cambiocapas);

                layer1 = new OpenLayers.Layer.WMS("Argentina",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/argentina.map",{layers: "argentina", format:"image/png"},
                {isBaseLayer:true, visibility:true, displayInLayerSwitcher:false, opacity:0.5});

                mapa.addLayer(layer1);

                layer2 = new OpenLayers.Layer.WMS("Santa Fe",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/mapasantafe.map",{layers: "santafe", format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:true});

                mapa.addLayer(layer2);

                layer3 = new OpenLayers.Layer.WMS("Localidades Santa Fe",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/localidadesstafe.map",{layers: "localidadesstafe", format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:false});

                mapa.addLayer(layer3);

                layer4 = new OpenLayers.Layer.WMS("Puentes Santa Fe",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/puentestafe.map",{layers: "0", format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:true,opacity:0.5});

                mapa.addLayer(layer4);

                layer5 = new OpenLayers.Layer.WMS("Ríos Argentina",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/rios.map",{layers: "hidro", format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:true,opacity:0.4});

                mapa.addLayer(layer5);

                layer6 = new OpenLayers.Layer.WMS("Rutas Argentina",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/rutas.map",{layers: "rutas", format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:true, opacity: 0.3});

                mapa.addLayer(layer6);

                /*layer7 = new OpenLayers.Layer.WMS("Estado Puentes",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/estadopuente.map",{layers: "puentesbuenos,puentesmalos,puentesregulares", format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:false, opacity: 0.8});

                mapa.addLayer(layer7);*/
                //captura el evento click para levantar el popup de la capa puentes
                //mapa.events.register("click", mapa, findLayerClick);
                //captura el evento click para devolver las coordenadas del mouse
                //mapa.events.register("click", mapa, mouseSelectHandler);
                /*  var jplOverview = layer2.clone();
                var controlOptions = {
                    maximized: true,
                    mapOptions: OpenLayers.Util.extend(mapaopciones, {
                        maxResolution: 'auto',
                       //maxExtent: new OpenLayers.Bounds(-80.0000, -60.2000, -45.0000, -19.4000),
                        center: new OpenLayers.LonLat(-61.004660194176,-30.877475728159),
                        zoom: 2
                    }),
                    layers: [jplOverview]
                }
                var overview2 = new OpenLayers.Control.OverviewMap(controlOptions);
                mapa.addControl(overview2);*/

                // mapa.setCenter(new OpenLayers.LonLat(-61.004660194176,-30.877475728159),2);

                if (!mapa.getCenter())
                //mapa.zoomToMaxExtent();lon=-61.004660194176,lat=-30.877475728159
                //mapa.zoomTo(2);
                    mapa.setCenter(new OpenLayers.LonLat(-61.004660194176,-30.877475728159),3);

            }

            function altaObra() {

                mapa.events.register("click", mapa, mouseCoordSelectHandler);
            }
            function mouseCoordSelectHandler(e) {
                var position = this.events.getMousePosition(e);
                var lonlat = mapa.getLonLatFromPixel(position);
                alert(lonlat);
                mapa.events.unregister("click", mapa, mouseCoordSelectHandler);
            }

            function filtro_estados (_this){
                var estado = _this.value;

                layer_estados = new OpenLayers.Layer.WMS("Estado Puentes",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/estadopuente.map",{layers: estado, format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:true, opacity: 0.8, displayInLayerSwitcher:false});

                mapa.addLayer(layer_estados);  
            }

            function filtro_tipos_obras(_this){
                var tipo_obra = _this.value;
                
                layer_tipos_obras = new OpenLayers.Layer.WMS("Puentes Santa Fe",
                "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/ms4w/apps/mapserv-demo/puentestafe.map",{layers: tipo_obra, format:"image/png", transparent: "TRUE"},
                {isBaseLayer:false, visibility:true, opacity:0.5, displayInLayerSwitcher:false});

                mapa.addLayer(layer_tipos_obras);

                $("#tipologias").html("");
                $("#tipologias").hide("slow");
                $("#cargando_tipologias").show();
                $("#tipologias").hide("slow");
                if (tipo_obra == ""){
                    $("#cargando_tipologias").css("display", "none");
                }else{
                    $.ajax({
                        url: "http://proyecto.sgoav/admin/obras/view_tipologias_mapa/"+tipo_obra,
                        cache: false,
                        success: function(html){
                            $("#tipologias").html(html);
                            $("#tipologias").show("slow");
                            $("#cargando_tipologias").hide();
                        }
                    });
                }
            }

            function filtro_provincias(_this){
                var provincia_id = _this.value;
                $("#departamento").html("");
                $("#departamento").hide("slow");
                $("#cargando_departamentos").show();
                $("#localidad").hide("slow");
                if (provincia_id == ""){
                    $("#cargando_departamentos").css("display", "none");
                }else{
                    $.ajax({
                        url: "http://proyecto.sgoav/admin/obras/view_departamentos_mapa/"+provincia_id,
                        cache: false,
                        success: function(html){
                            $("#departamento").html(html);
                            $("#departamento").show("slow");
                            $("#cargando_departamentos").hide();
                            $("#ObraDepartamentoId").focus();
                        }
                    });
                }
            }

            function filtro_departamentos(_this){
                var departamento_id = _this.value;
                $("#localidad").html("");
                $("#localidad").hide("slow");
                $("#cargando_localidades").show();
                if (departamento_id == ""){
                    $("#cargando_localidades").css("display", "none");
                }else{
                    $.ajax({
                        url: "http://proyecto.sgoav/admin/obras/view_localidades_mapa/"+departamento_id,
                        cache: false,
                        success: function(html){
                            $("#localidad").html(html);
                            $("#localidad").show("slow");
                            $("#cargando_localidades").hide();
                            $("#ObraLocalidadeId").focus();
                        }
                    });
                }
            }

            function filtro_zonas(_this){
                var tipo_zona_id = _this.value;
                $("#cargando_zonas").show();
                $("#zonas").html("");
                $("#zonas").hide("slow");
                if (tipo_zona_id == ""){
                    $("#cargando_zonas").css("display", "none");
                }else{
                    $.ajax({
                        url: "http://proyecto.sgoav/admin/zonas/view_zonas_mapa/"+tipo_zona_id,
                        cache: false,
                        success: function(html){
                            $("#zonas").html(html);
                            $("#zonas").show("slow");
                            $("#cargando_zonas").hide();
                        }
                    });
                }
            }

            function filtro_rutas(){
                var tipo_ruta_id = $("#RutaRutasTipoId").attr("value");
                var tipologia_vial_id = $("#RutaTipologiasVialeId").attr("value");
                $("#cargando_rutas").show();
                $("#rutas").html("");
                $("#rutas").hide("slow");
                if ((tipo_ruta_id == "") && (tipologia_vial_id == "")){
                    $("#cargando_rutas").css("display", "none");
                }else{
                    $.ajax({
                        url: "http://proyecto.sgoav/admin/rutas/view_rutas_mapa/"+tipo_ruta_id+"/"+tipologia_vial_id,
                        cache: false,
                        success: function(html){
                            $("#rutas").html(html);
                            $("#rutas").show("slow");
                            $("#cargando_rutas").hide();
                        }
                    });
                }
            }

            function filtro_obstaculos(_this){
                var tipo_obstaculo_id = _this.value;
                $("#cargando_obstaculos").show();
                $("#obstaculos").html("");
                $("#obstaculos").hide("slow");
                if (tipo_obstaculo_id == ""){
                    $("#cargando_obstaculos").css("display", "none");
                }else{
                    $.ajax({
                        url: "http://proyecto.sgoav/admin/obstaculos/view_obstaculos_mapa/"+tipo_obstaculo_id,
                        cache: false,
                        success: function(html){
                            $("#obstaculos").html(html);
                            $("#obstaculos").show("slow");
                            $("#cargando_obstaculos").hide();
                        }
                    });
                }
            }
        </script>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td style="width: 20%">
                        <div id="div_layerswitcher"></div>
                        <div id="" style="">
                            <?php
                            echo $form->label('Niveles de Servicio:');
                            echo $form->input('nivele_id', array('label' => false, 'type' => 'select', 'id' => 'ObraNiveleId', 'name' => 'data[Obra][nivele_id]', 'options' => $niveles, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_estados(this)'));

                            echo $form->label('Estados:');
                            echo $form->input('estado_id', array('label' => false, 'type' => 'select', 'id' => 'ObraEstadoId', 'name' => 'data[Obra][estado_id]', 'options' => $estados, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_estados(this)'));

                            echo $form->label('Tipos de Obra:');
                            echo $form->input('obras_tipo_id', array('label' => false, 'type' => 'select', 'id' => 'ObraObrasTipoId', 'name' => 'data[Obra][obras_tipo_id]', 'options' => $obras_tipos, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_tipos_obras(this);'));
                            ?>
                            <div id="cargando_tipologias" style="display: none;"><img src="<?php echo $html->url('/img/ajax-loader.gif') ?>" alt="Cargando tipologías" /></div>
                            <div id="tipologias"></div>
                            <?php
                            echo $form->label('Provincias:');
                            echo $form->input('provincia_id', array('label' => false, 'type' => 'select', 'id' => 'ObraProvinciaId', 'name' => 'data[Obra][provincia_id]', 'options' => $provincias, 'onchange' => 'filtro_provincias(this);', 'empty' => '', 'selected' => ''));
                            ?>
                            <div id="cargando_departamentos" style="display: none;"><img src="<?php echo $html->url('/img/ajax-loader.gif') ?>" alt="Cargando departamentos" /></div>
                            <div id="departamento"></div>
                            <div id="cargando_localidades" style="display: none;"><img src="<?php echo $html->url('/img/ajax-loader.gif') ?>" alt="Cargando localidades" /></div>
                            <div id="localidad"></div>
                            <?php
                            echo $form->label('Tipos de Zona:');
                            echo $form->input('zonas_tipo_id', array('label' => false, 'type' => 'select', 'id' => 'ZonaZonasTipoId', 'name' => 'data[Zona][zonas_tipo_id]', 'options' => $tipos_zonas, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_zonas(this);'));
                            ?>
                            <div id="cargando_zonas" style="display: none;"><img src="<?php echo $html->url('/img/ajax-loader.gif') ?>" alt="Cargando zonas" /></div>
                            <div id="zonas"></div>
                            <?php
                            echo $form->label('Tipos de Ruta:');
                            echo $form->input('rutas_tipo_id', array('label' => false, 'type' => 'select', 'id' => 'RutaRutasTipoId', 'name' => 'data[Ruta][rutas_tipo_id]', 'options' => $tipos_rutas, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_rutas();'));

                            echo $form->label('Tipologías Viales:');
                            echo $form->input('tipologias_viale_id', array('label' => false, 'type' => 'select', 'id' => 'RutaTipologiasVialeId', 'name' => 'data[Ruta][tipologias_viale_id]', 'options' => $tipologias, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_rutas();'));
                            ?>
                            <div id="cargando_rutas" style="display: none;"><img src="<?php echo $html->url('/img/ajax-loader.gif') ?>" alt="Cargando rutas" /></div>
                            <div id="rutas"></div>
                            <?php
                            echo $form->label('Tipos de Obstáculo:');
                            echo $form->input('obstaculos_tipo_id', array('label' => false, 'type' => 'select', 'id' => 'ObstaculoObstaculosTipoId', 'name' => 'data[Obstaculo][obstaculos_tipo_id]', 'options' => $tipos_obstaculos, 'empty' => '', 'selected' => '', 'onchange' => 'filtro_obstaculos(this);'));
                            ?>
                            <div id="cargando_obstaculos" style="display: none;"><img src="<?php echo $html->url('/img/ajax-loader.gif') ?>" alt="Cargando obstáculos" /></div>
                            <div id="obstaculos"></div>
                        </div>
                    </td>
                    <td style="width: 80%">
                        <div id="map"></div>
                    </td>
                </tr>
<!--                <tr><td><input id="click" type="button" value="Nueva Obra" name="click" onclick="altaObra()" /></td></tr>-->
            </table>
        </div>
    </body>
</html>




<?php
                            /*
                             * To change this template, choose Tools | Templates
                             * and open the template in the editor.
                             */
?>
